import { reactive, toRefs, watch } from 'vue'
import { voteApi } from '@/api'
export default props => {
    const params = reactive({
        listRef: null,
        voteComments: [],
        next: null
    })

    const getComments = async () => {
        try {
            const { data } = await voteApi.getComments({
                oid: props.vid,
                mode: 3,
                next: params.next
            }) 
            const { replies, cursor, cursor: { next } } = data
            params.next = next                     
            if (cursor.is_end) {
                completeLoad()
            } else {
                params.voteComments.push(...replies)         
            }
        } catch (error) {
            console.log(error)
        }
        stopLoad()
    }
    // 滚动到页面底部时触发加载
    const handleLoad = () => {
        if (!params.listRef.isComplete()) {
            getComments()
        }      
    }

    const stopLoad = () => {
        params.listRef?.stopLoad()
    }
    const completeLoad = () => {
        params.listRef?.completeLoad()
    }

    watch(() => props.vid, () => {
        getComments()
    }, {
        immediate: true
    })

    return {
        ...toRefs(params),
        handleLoad
    }
}